<!DOCTYPE html>
<html>
<head>
  <title>Canvas 坐标系转换示例</title>
</head>
<body>
<canvas id="myCanvas" width="400" height="400" style="border:1px solid black;"></canvas>
<div id="coordinates"></div>

<script>
  // 获取 Canvas 元素
  const canvas = document.getElementById('myCanvas');
  const ctx = canvas.getContext('2d');

  // 设置原点坐标为 (0, 40)
  const originX = 0;
  const originY = 40;

  // 坐标系转换函数
  function applyTransformations() {
    // 反转y轴方向
    ctx.transform(1, 0, 0, -1, 0, canvas.height);

    // 平移坐标系至原点位置
    ctx.translate(originX, originY);
  }

  // 绘制一个简单的图形，以便观察坐标变换
  function drawShape() {
    // 绘制红点，位置为转换后的原点坐标
    ctx.fillStyle = 'red';
    ctx.beginPath();
    ctx.arc(0, 0, 5, 0, 2 * Math.PI);
    ctx.fill();

    // 绘制矩形，位置为 (50, 50)，宽度为 100，高度为 60
    ctx.fillStyle = 'blue';
    ctx.fillRect(50, 50, 100, 60);
  }

  // 显示坐标函数
  function showCoordinates(x, y) {
    const coordinatesDiv = document.getElementById('coordinates');
    coordinatesDiv.innerHTML = `X: ${x}, Y: ${y}`;
  }

  // 应用坐标系转换
  applyTransformations();

  // 绘制图形
  drawShape();

  // 监听鼠标移动事件
  canvas.addEventListener('mousemove', (event) => {
    const rect = canvas.getBoundingClientRect();
    const mouseX = event.clientX - rect.left;
    const mouseY = canvas.height - (event.clientY - rect.top);

    // 转换坐标为实际坐标系中的值
    const realX = mouseX - originX;
    const realY = mouseY - originY;

    // 显示实际坐标
    showCoordinates(realX, realY);
  });
</script>
</body>
</html>
